<script setup lang="ts">
//行为
import { ref } from 'vue';
import type { Formdata } from '@/types/user'; 
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { loginAPI } from '@/apis/user';
const formdata = ref<Formdata>({
    mobile: '15555555555',
    code:'246810'
})

const Formrules = ref<FormRules<Formdata>>({
    mobile: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        // { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        //  len 设置验证规则的长度
        { len: 6, message: '验证码不正确', trigger: 'blur' }
    ]
})

const formref = ref<FormInstance>()
const store = useUserStore()
const router = useRouter()
const onSubmit = () => {
    formref.value?.validate(async (res) => {
        if (res) {
            const res = await loginAPI(formdata.value)
            store.setToken(res.data.token)
            router.push('/')
            ElMessage.success('登陆成功')
        }
    })
}
</script>
<template>
    <div class="container">
        <el-card>
            <img class="logo" src="@/assets/images/logo.png" alt="" />
            <el-form ref="formref" :model="formdata" :rules="Formrules">
                <el-form-item label="账号" prop="moblie">
                    <el-input v-model="formdata.mobile" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="code">
                    <el-input v-model="formdata.code" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-checkbox :value="true">我已阅读并同意「用户协议」和「隐私条款」</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">登陆</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<style scoped>
.container{
width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url('@/assets/images/login.png');
}
.el-card{
width: 440px;
    height: 380px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);

}
  .el-form {
      padding: 0 20px;

      .el-button {
          width: 100%;
      }
  }
</style>